// 扩展Vue原有功能： 全局组件 自定义指令 挂载原型方法 vue3没有过滤器
import XtxSkeleton from './xtx-skeleton'
import XtxCarousel from './xtx-carousel'
import XtxMore from './xtx-more'
import XtxBread from './xtx-bread'
import XtxBreadItem from './xtx-bread-item'
import XtxCheckbox from './xtx-checkbox.vue'
import XtxInfiniteLoading from './xtx-infinite-loading.vue'
import XtxCity from './xtx-city'
import XtxNumberBox from './xtx-numberBox.vue'
import XtxButton from './xtx-button.vue'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.component(XtxBread.name, XtxBread)
    app.component(XtxBreadItem.name, XtxBreadItem)
    app.component(XtxCheckbox.name, XtxCheckbox)
    app.component(XtxInfiniteLoading.name, XtxInfiniteLoading)
    app.component(XtxCity.name, XtxCity)
    app.component(XtxNumberBox.name, XtxNumberBox)
    app.component(XtxButton.name, XtxButton)
    // 商品图片懒加载自定义指令
    app.directive('lazyload', (el, binding) => {
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            observer.unobserve(el)
            el.onerror = () => {
              el.src = defaultImg
            }
            el.src = binding.value
          }
        },
        {
          threshold: 0.01
        }
      )
      observer.observe(el)
    })
  }
}
